/*
 * @desc 列表页 Hook
 * @params {Function} requestFn - 请求列表数据
 * @params {Object} filterOption - 筛选条件参数
*/

import { ref, reactive, onMounted, watch } from 'vue'

export default function useTableList(requestFn, filterOption) {
    // 加载状态
    const loading = ref(false)
    // 当前页
    const curPage = ref(1)
    // 总数量
    const total = ref(0)
    // 一页显示多少条数据 - 待扩展
    const pageSize = ref(10)
    // 数据容器
    let tableData = ref([])
    // 对话框 开启/关闭 状态
    const dialogState = ref(false)
    // 对话框配置
    const dialogConfig = reactive({
        title: '', //对话框标题
        row: {} // 用于编辑时渲染数据
    })

    // 赋值对话框配置参数
    const handleDialog = (title, row = {}) => {
        dialogConfig.title = title
        dialogConfig.row = row
        dialogState.value = true
    }

    // 初始化数据
    const initData = async () => {
        loading.value = true
        const { data, page = null } = await requestFn({ ...filterOption, curPage: curPage.value })
        tableData.value = data
        if (page) total.value = page.total;
        loading.value = false
    }

    /*
     * @desc 表单重置
     * @param {Object} resetRef - ref实例
     * @param {Function} callBack - 回调
     */
    const reset = (resetRef, callBack) => {
        resetRef.resetFields()
        callBack && callBack()
    }

    // 当前页改变时触发
    watch(curPage, () => {
        initData()
    })

    onMounted(() => {
        requestFn && initData()
    })

    return {
        dialogState,
        dialogConfig,
        handleDialog,
        loading,
        curPage,
        total,
        pageSize,
        tableData,
        initData,
        reset
    }
}